<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
</head>
<style>
    .list {
        width: 590px;
        height: 470px;
        margin: 100px auto;
        position: relative;
    }

    .list li {

        position: absolute;

    }

    .list li:nth-child(3) {

        z-index: 1;

    }

    .mark {
        position: absolute;
        z-index: 9999;
bottom: 20px;
    }

    .mark a {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        float: left;
        margin-left: 10px;
        background-color: rgb(145, 141, 141);
        background-clip: content-box;
        border:2px solid transparent;
    }
    .mark a.bian{
        background-color: rgb(255, 255, 255);
        border:2px solid rgba(255, 255, 255, .3);
    }
</style>

<body>
    <ul class="list">
        <li><a href="javascript:;"><img src="./img/01.jpg"></a></li>
        <li><a href="javascript:;"><img src="./img/02.jpg"></a></li>
        <li><a href="javascript:;"><img src="./img/03.jpg"></a></li>
        <li><a href="javascript:;"><img src="./img/04.jpg"></a></li>
        <li><a href="javascript:;"><img src="./img/05.jpg"></a></li>
        <div class="mark">
            <a class="bian" href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </ul>

</body>

</html>